<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
<title>第三次作业：登录界面</title>


<style>
body{background-color:orange;}
div{width:500px;height:500px;background:#efd2a0;margin:auto;}
h1{color:white;font-size:40pt;}
hr{color:navy;}
form{font-size:12pt;}
</style>


</head>
<body>
<div>
<h1 style="text-align:center"><strong>登录</strong></h1>
<hr>
<form style="text-align:center">
<input type="text" id="username" placeholder="请输入用户名"><br/>
<input type="password" id="password" placeholder="请输入密码"><br/>
<input type="submit" value="登录" onclick="login()"><br/>
</form>
<nav style="text-align:center">
	<a href="/https://kowaji.gitee.io/no.3register/">立即注册!</a> 
</nav>
</div>
<script type="text/javascript">
	//验证用户名的输入
	function login() {
		var usernameId = document.getElementById("username");
		var username = usernameId.value;
		if (username.length == 0) {
            alert("请输入用户名");
            return; 
		}
    //验证密码的输入
		var passwordId = document.getElementById("password");
		var password = passwordId.value;
		if (password.length == 0) {
			alert("请输入密码");
			return;
		}
    //验证密码是否正确
        var storage = window.localStorage;
		var storagePassword = storage["password"];
		if (password != storagePassword) {
            alert("密码错误");
            return;
		}else{
		storage["token"] = password;
		window.open("https://kowaji.gitee.io/no.3success");
	}
</script>
</body>
</html>